<template>
	<view class="content">
		<view class="header">纯前端附件选择上传2.0</view>
		
		<view class="tab">
			<view :style="[{color: tabIndex==0? '#3F536E': '#999'}]" @click="onTab(0)">tab1-create</view>
			<view :style="[{color: tabIndex==1? '#3F536E': '#999'}]" @click="onTab(1)">tab2-close</view>
		</view>
		
		<view>
			<view v-for="(item,index) in list" :key="index" class="padding">{{ item }}</view>
			<button style="margin: 30rpx;" @click="add">DOM重排测试</button>
			<button style="margin: 30rpx;" @click="open">nvue测试</button>
		</view>
		
		<view v-show="tabIndex==0" class="padding">
			<lsj-upload 
			ref="lsjUpload"
			childId="upload2"
			width="100px"
			:height="height"
			:option="option"
			:size="size"
			:debug="debug"
			:instantly="instantly"
			@progress="onprogress"
			@changeFile="onChange">
				<view class="btn" :style="{height: height}">选择附件</view>
			</lsj-upload>
			
			
			<view style="margin-top: 20rpx;">
				<view @click="upload" class="btn" style="width: 100px;height: 100rpx;">手动上传</view>
			</view>
			
		</view>
		<view v-show="tabIndex==1">
			APP端因为webview层级比当前窗口文档流级别高，
			切换tab时应该把插件hide掉，切换回去再重新show
		</view>
		
		<view class="padding">
			<!-- #ifdef MP-WEIXIN -->
			<view v-for="(item,index) in wxFiles" :key="index">
				<text>{{item.name}}</text>
				<text style="margin-left: 10rpx;">大小：{{item.size}}</text>
				<text style="margin-left: 10rpx;">状态：{{item.type}}</text>
				<text style="margin-left: 10rpx;">进度：{{item.progress}}</text>
				<view>
					<button>删除</button>
				</view>
			</view>
			<!-- #endif -->
			
			
			<view v-for="(item,index) in files.values()" :key="index">
				<text>{{item.name}}</text>
				<text style="margin-left: 10rpx;">大小：{{item.size}}</text>
				<text style="margin-left: 10rpx;">状态：{{item.type}}</text>
				<text style="margin-left: 10rpx;">进度：{{item.progress}}</text>
				<!-- <text style="margin-left: 10rpx;" v-if="item.responseText">服务端返回演示：{{item.responseText.code}}</text> -->
				<text @click="clear(item.name)" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;">删除</text>
			</view>
		</view>
		
		<view class="padding ts">
			<view>此次改版l-file，slot自定义样式，取消中间层</view>
			<view>不脱离文档流，跟随页面级滚动</view>
			<view>使用插件有疑问欢迎加入</view>
			<view>QQ交流群1：701468256（已满）</view>
			<view>QQ交流群2：469580165</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 上传接口参数
			option: {
				// 上传服务器地址，此地址需要替换为你的接口地址
				url: 'http://hlapi.j56.com/dropbox/document/upload',
				// 上传附件的key
				name: 'file',
				// 根据你接口需求自定义请求头
				header: {
					'Authorization': 'bearer eyJhbGciOiJSUzI1NiIsInR5c',
					'uid': '27682',
					'client': 'app',
					'accountid': 'DP'
				},
				// 根据你接口需求自定义body参数
				formData: {
					// 'orderId': 1000
				}
			},
			// 必传项
			height: '180rpx',
			// 文件上传大小
			size: 10,
			// 打印日志
			debug: true,
			// 选择文件后是否立即自动上传
			instantly: true,
			// 文件回显列表
			files: new Map(),
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			wxFiles: [],
			
			
			// 演示用
			tabIndex: 0,
			list:[], 
		}
	},
	onReady() {
		setTimeout(()=>{
			console.log('以下注释内容为-动态更新参数演示，放开后可查看演示效果');
			// 合并option对象
			// this.$refs.lsjUpload.setData(this.option);
			// 修改option对象的name属性
			// this.$refs.lsjUpload.setData('name','myFile');
			
			// 修改option对象的formData内的属性
			// this.$refs.lsjUpload.setData('formData.appid','1111');
			
			// 替换option对象的formData
			// this.$refs.lsjUpload.setData('formData',{appid:'222'});
			
			// option对象的formData新增属性
			// this.$refs.lsjUpload.setData('formData.newkey','新插入到formData的属性');
			
		},2000)
	},
	methods: {
		// 上传进度回调
		onprogress(item) {
			// 更新当前状态变化的文件
			this.files.set(item.name,item);
			
			// 演示上传完成后取服务端数据
			if (item['responseText']) {
				console.log('演示服务器返回的字符串JSON转对象');
				this.files.get(item.name).responseText = JSON.parse(item.responseText);
			}
			this.$forceUpdate();
			console.log('打印对象',JSON.stringify(this.files.get(item.name)));
			
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif
			
			// 演示判断是否所有文件均已上传成功
			let isAll = [...this.files.values()].find(item=>item.type!=='success');
			if (!isAll) {
				console.log('已全部上传完毕');
			}
			else {
				console.log(isAll.name+'待上传');
			}
		},
		// 文件选择回调
		onChange(files) {
			this.files = files;
			this.$forceUpdate();
			
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif
		},
		// 手动上传
		upload() {
			// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
			this.$refs.lsjUpload.upload();
		},
		// 移除某个文件
		clear(name) {
			// name=指定文件名，不传name默认移除所有文件
			this.$refs.lsjUpload.clear(name);
		},
		
		
		/**
		 * 以下为演示
		 */
		// DOM重排演示，重排后组件内部updated默认会触发show方法,若特殊情况未能触发updated也可以手动调用一次show()
		// 什么是DOM重排？自行百度去~
		add() {
			this.list.push('DOM重排测试');
		},
		// 切换视图演示，APP端因为是webview，层级比view高，
		// 此时若不希望点击触发选择文件，需要手动调用hide()
		// 手动调用hide后，需要调用show()才能恢复触发面
		onTab(tabIndex) {
			this.tabIndex = tabIndex;
			
			if (tabIndex == 0 ) {
				this.$nextTick(()=>{
					this.$refs.lsjUpload.show();
				})
			}
			else {
				this.$refs.lsjUpload.hide();
			}
		},
		open() {
			uni.navigateTo({
				url: '/pages/nvue-demo/nvue-demo'
			});
		}
	}
}
</script>

<style>
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		line-height: 130rpx;
		text-align: center;
		font-size: 32rpx;
		background-color: #3F536E;
		color: #fff;
		z-index: 9999;
	}
	.content {
		padding-top: 130rpx;
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.inputs {
		height: 100rpx;
		border-bottom: 1rpx solid #808080;
	}
	.padding {
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-bottom: 50rpx;
	}
	.tab {display: flex;padding: 30rpx;}
	.tab view {height: 100rpx;line-height: 100rpx;flex: 1;text-align: center;border: 1rpx solid #2C405A;}
	.btn {
		height: 80rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
	.ts {
		line-height: 2em;
	}
	.nbtn {
		margin: 100rpx 50rpx;
	}
</style>
